<template>
  <div class="commentReply">
    <NavBar title="评价详情" fixed back/>
    <div class="van-cell-group van-hairline--top-bottom van-panel">
      <!--用户信息-->
      <div class="van-cell van-panel__header">
        <div class="van-cell__title">
          <span class="commentMemberInfo">
            <van-row>
            <van-col span="4" v-if="commentRE.memberImageUrl">
              <img :src="GLOBAL.baseImagePath + commentRE.memberImageUrl">
            </van-col>
            <van-col span="4" v-if="!commentRE.memberImageUrl">
              <img :src="defaultImage">
            </van-col>
            <van-col span="20" style="padding-top: 9px">
              {{commentRE.memberNickname}}
            </van-col>
            </van-row>
          </span>
          <div class="van-cell__label">
            {{UTILS.formatDateTime(commentRE.createTime)}}
          </div>
        </div>
      </div>
      <!--评论内容和图片-->
      <div class="van-cell">
        <div>{{commentRE.content}}</div>
      </div>
      <div class="van-cell van-panel__header" v-for="(image, index) in commentRE.commentPic" :key="index">
        <div class="van-cell__title">
          <div class="item-detail">
            <img :src="GLOBAL.baseImagePath + image.imageUrl">
          </div>
        </div>
      </div>
      <!--商家回复-->
      <div class="van-cell van-cell__label" v-if="commentRE.adminContent !== null">
        商家回复：{{commentRE.adminContent}}
      </div>
      <!--追加评论-->
      <div class="van-cell van-panel__header" v-if="commentRE.appendContent !== null">
        <div class="van-cell__title">
          <span class="commentAppend">
            用户{{getAppendDay(commentRE.createTime, commentRE.appendTime)}}
          </span>
        </div>
      </div>
      <!--用户追加评论内容-->
      <div class="van-cell" v-if="commentRE.appendContent !== null">
        <div>{{commentRE.appendContent}}</div>
      </div>
      <!--追加图片-->
      <div class="van-cell van-panel__header" v-for="appendImage in commentRE.appendPic" :key="appendImage.id">
        <div class="van-cell__title">
          <div class="item-detail">
            <img :src="GLOBAL.baseImagePath + appendImage.imageUrl">
          </div>
        </div>
      </div>
      <!--商品属性-->
      <div class="van-cell van-cell__label">
        颜色分类：{{commentRE.goodsPropertyName}}
      </div>
    </div>
    <!--全部评价-->
    <div class="van-cell van-panel__header">
      <div class="van-cell__title">
        <van-icon name="chat" /> 全部评论
        <span v-if="commentReplyList !== null">
          ({{commentReplyList.length}})
        </span>
      </div>
    </div>
    <!--评价内容为空-->
    <div v-if="commentReplyList === null" >
      <EmptyData text="沙发还空着，快来抢吧~"/>
    </div>
    <!--评价内容-->
    <div class="comment-box">
      <div class="van-cell van-panel__header commentMemberInfo" v-for="(commentReply, index) in commentReplyList" :key="index">
        <div class="van-cell__title" @click="toCommentView(commentReply)">
          <van-row>
            <!--用户头像-->
            <van-col span="3" v-if="commentReply.memberImageUrl">
                <img :src="GLOBAL.baseImagePath + commentReply.memberImageUrl">
            </van-col>
            <van-col span="3" v-if="!commentReply.memberImageUrl">
                <img :src="defaultImage">
            </van-col>
            <van-col span="15">
              <!--用户昵称和时间-->
              <div class="van-cell van-panel__header">
                <div class="van-cell__title">
                  <span class="commentMemberInfo" v-if="commentReply.memberNickname !== null">
                    {{commentReply.memberNickname}}
                  </span>
                  <span class="commentMemberInfo" v-if="commentReply.memberNickname === null">
                    匿名用户
                  </span>
                  <div class="van-cell__label">
                    {{getCommentReplyDay(commentReply.createTime, commentReply.dateTime)}}
                  </div>
                </div>
              </div>
            </van-col>
            <div class="van-cell__value" v-if="commentReply.isSelf === 1">
              <div><span @click="deleteCommentReply(commentReply.id)">删除</span></div>
            </div>
          </van-row>
          <div class="van-cell__label">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <span v-if="commentReply.parentId !== null">
                <span v-if="commentReply.replyMemberNickname !== null">
                  回复{{commentReply.replyMemberNickname}}:
                </span>
                <span v-if="commentReply.replyMemberNickname === null">
                  回复匿名用户:
                </span>
            </span>
            {{commentReply.content}}
          </div>
        </div>
      </div>
    </div>
    <!--评论输入-->
    <van-dialog
      v-model="show"
      show-cancel-button
      :before-close="beforeClose"
      @confirm="insertCommentReply()"
      @cancel="cancelCommentReply()"
    >
      <van-field
        v-model="commentReplyContent.content"
        :placeholder="commentReplyContentBg"
      />
    </van-dialog>
    <div class="van-submit-bar">
      <div class="van-submit-bar__bar">
        <div class="van-submit-bar__text">
        </div>
        <van-button size="small" type="default" @click="toCommentView()">评论</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '../../components/common/NavBar.vue'
import commentApi from '../../api/comment'
import { Dialog, Toast } from 'vant'
import header from '@/assets/user/header.png'
import EmptyData from '../../components/common/EmptyData.vue'
import Vue from 'vue'

Vue.use(Dialog)
export default {
  data () {
    return {
      commentReplyContent: {commentId: null, content: null, parentId: null},
      commentReplyContentBg: null,
      username: '',
      defaultImage: header,
      password: '',
      commentView: false,
      imageUrl: [''],
      show: false,
      num: 0,
      list: [],
      commentRE: [],
      commentReplyList: []
    }
  },
  created () {
    this.getComment()
  },
  computed: {},
  methods: {
    cancelCommentReply: function () {
      this.show = false
      this.commentReplyContent.parentId = null
      this.commentReplyContent.content = null
    },
    // 新增评论回复
    insertCommentReply: function () {
      const _this = this
      this.commentReplyContent.commentId = this.$route.query.commentId
      commentApi.insertCommentReply(this.commentReplyContent).then(function (res) {
        if (res.data.re) {
          Toast('评论成功')
          _this.getComment()
        } else {
          Toast(res.data.msg)
        }
        _this.commentReplyContent.parentId = null
        _this.commentReplyContent.content = null
      }).catch(function () {
        _this.commentReplyContent.parentId = null
        _this.commentReplyContent.content = null
      })
    },
    // 删除评论回复
    deleteCommentReply: function (id) {
      this.num = 1
      const _this = this
      Dialog.confirm({
        message: '亲，确定删除吗？'
      }).then(() => {
        this.num = 0
        commentApi.deleteCommentReplyById(id).then(function (res) {
          if (res.data.success) {
            Toast('删除成功')
            _this.getComment()
          } else {
            Toast(res.data.msg)
          }
        }).catch(function () {
          Toast('删除失败')
        })
      }).catch(() => {
        this.num = 0
      })
    },
    // 打开评论平回复
    toCommentView: function (commentReply) {
      if (this.num === 0) {
        if (commentReply) {
          this.commentReplyContent.parentId = commentReply.id
          if (commentReply.memberNickname) {
            this.commentReplyContentBg = '回复' + commentReply.memberNickname + ':'
          } else {
            this.commentReplyContentBg = '回复匿名用户:'
          }
        } else {
          this.commentReplyContentBg = '回复楼主:'
        }
        this.show = true
      }
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000)
      } else {
        done()
      }
    },
    toComment: function () {
      this.show = true
    },
    getAppendDay: function (oldTime, newTime) {
      let day = Math.floor((newTime - oldTime) / (1000 * 60 * 60 * 24))
      if (day === 0) {
        return '当天追评'
      }
      return day + '天后追评'
    },
    getCommentReplyDay: function (oldTime, newTime) {
      let time = (newTime - oldTime)
      let year = Math.floor(time / (1000 * 60 * 60 * 24 * 12))
      if (year > 0) {
        return year + '年前'
      }
      let day = Math.floor(time / (1000 * 60 * 60 * 24))
      if (day === 0) {
        let hours = Math.floor(time / (1000 * 60 * 60))
        if (hours === 0) {
          let minutes = Math.floor(time / (1000 * 60))
          if (minutes === 0) {
            return '刚刚'
          }
          return minutes + '分钟前'
        }
        return hours + '小时前'
      }
      return day + '天前'
    },
    getComment: function () {
      const _this = this
      commentApi.getCommentById(this.$route.query.commentId).then(function (res) {
        if (res.data.success) {
          _this.list = res.data.re
          _this.commentRE = res.data.re.commentRE
          _this.commentReplyList = res.data.re.commentReplyList
          if (_this.commentRE === null) {
            Toast('该评论不存在！')
            _this.$router.push('/home')
          }
        } else {
          Toast(res.data.msg)
          _this.$router.go(-1)
        }
      })
    }
  },
  components: {
    NavBar,
    EmptyData
  }
}
</script>
<style scoped>
  .commentMemberInfo img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    height: 30px;
    width: 30px;
    border: 3px solid #edc700;
  }
  .commentMemberInfo text {
    height: 30px;
    width: 30px;
  }
  .item-detail {
    overflow: auto;
  }
  .item-detail img {
    max-width: 100%;
  }
  .commentAppend  {
    color: #f23030;
  }

  .comment-box {
    padding-bottom: 50px;
  }
  .comment-box .van-cell {
    padding-top: 0px;
  }

  .comment-box .van-row {
    padding: 5px 0px;
  }
</style>
